<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选，全部选训练</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
    <script>
        $(function () {
            var $btn1=$("#btn1");
            $btn1.click(function () {
                $(":checkbox").prop("checked",true);
            });
            var $btn2=$("#btn2");
            $btn2.click(function () {
                $(":checkbox").prop("checked",false);
                alert(1);
            });
            var $btn3=$("#btn3"),cnt=0;
            $btn3.click(function () {
                cnt=0;
                $(":checkbox[name]").each(function () {
                    this.checked=!this.checked;
                    if(this.checked==true) cnt=cnt+1;
                });
                if(cnt==4||cnt==0) $(":checkbox:first").prop("checked",true);
                else $(":checkbox:first").prop("checked",false);
                alert(cnt);
            });
            var $btn4=$("#btn4");
            $btn4.click(function () {
                $(":checkbox[name]:checked").each(function () {
                    alert(this.value);
                });
            });
            var $btn=$(":checkbox:first");
            $btn.click(function () {
                $(":checkbox:not(:first)").prop("checked",this.checked);
            });
            $(":checkbox:not(:first)").click(function () {
                if($(":checkbox:not(:first):checked").length!=4) $(":checkbox:first").prop("checked",false);
                // else if($(":checkbox:not(:first):checked").length==4) $(":checkbox:first").prop("cheched",true);
                alert($(":checkbox:not(:first):checked").length);
            });
        })
    </script>
</head>
<body>
        你爱好的运动是？<input type="checkbox">全选/全不选 <br/>
        <input type="checkbox" name="box" value="足球" checked>足球
        <input type="checkbox" name="box" value="篮球">篮球
        <input type="checkbox" name="box" value="羽毛球" >羽毛球
        <input type="checkbox" name="box" value="乒乓球">乒乓球<br/>
        <button id="btn1">全选</button>
        <button id="btn2">全不选</button>
        <button id="btn3">反选</button>
        <button id="btn4">提交</button>

</body>
</html>